<template>
  <div class="editable-tree l-box-col">
    <div class="editable-tree-header l-mt-12 l-mb-12">
      <el-button
        class="market-standard-sidebar-btn"
        type="primary"
        @click="() => this.$emit('showDirectoryDialog', 'directory')"
        size="medium"
      >
        <i class="el-icon-folder"></i>
        新建目录
      </el-button>
    </div>
    <div class="editable-tree-body l-flex" @click="cancleSelect">
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        ref="treeComp"
      >
        <div
          class="custom-tree-node"
          slot-scope="{ node, data }"
          @mouseenter="() => mouseenter(data)"
          @mouseleave="() => mouseout(data)"
        >
          <div class="custom-tree-node-label">
            <!-- <span  class="l-mr-10">
              <i class="el-icon-folder"></i>
            </span>-->
            <!-- <span  class="l-mr-10">
              <i class="el-icon-document"></i>
            </span>-->
            <!-- <div>
              <title-tip :content="node.label" />
            </div>-->
            <!-- <el-input v-model="node.label"></el-input> -->
            <!-- <span>{{ node.label }}</span> -->
            <input
              style="width: 50%"
              size="mini"
              ref="inputVal"
              :value="node.label"
              placeholder="请输入分类名"
              @change="nameChange(node,$event)"
            />
          </div>

          <div class="custom-tree-node-operate">
            <!-- {{data}} -->
            <i v-show="data.showEdit" @click="() => edit(node, data)" class="el-icon-edit l-mr-8"></i>
            <i
              v-show="data.showDel"
              @click="() => remove(node, data)"
              class="el-icon-delete delete-icon"
            ></i>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
// import * as api from '@/api/tree'
let id = 10;
export default {
  name: "EditableTree",
  props: {
    // data: {
    //   type: Array,
    //   default: () => [],
    // },
    // menuType: {
    //   type: String,
    //   default: ""
    // },
    applicationType: {
      type: String,
      default: ""
    },
    defaultCheckTreeKeys: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    treeData() {
      return JSON.parse(JSON.stringify(this.data));
    }
  },
  data() {
    return {
      data: [
        {
          label: "一级 1",
          id: 1,
          children: [
            {
              label: "二级 1-1",
              id: 2,
              children: [
                {
                  id: 3,
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          id: 4,
          children: [
            {
              id: 5,
              label: "二级 2-1",
              children: [
                {
                  id: 6,
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              id: 7,
              children: [
                {
                  id: 8,
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        }
      ]
      // defaultProps: {
      //   children: 'children',
      //   label: 'label'
      // }
    };
  },
  methods: {
    remove(node, data) {
      const id = data.id;
      const params = {
        id,
        applicationType: this.applicationType
      };
      //   api.deleteDirectory(params).then((res) => {
      //     if (res.responseCode == 200) {
      //       this.removeTreeData(node, data)
      //       this.$message({
      //         showClose: true,
      //         message: '删除成功',
      //         type: 'success',
      //       })
      //       this.$emit('queryTreeData')
      //     } else {
      //       this.$message({
      //         message: res.message,
      //         type: 'warning',
      //       })
      //     }
      //   })
    },
    nameChange(data, e) {
      data.label = e.target.value;
    },
    edit(node, data) {
      const nodeInfo = {
        id: data.id,
        directoryName: data.label
      };
      this.$emit("editDirectoryDialog", nodeInfo);
    },
    removeTreeData(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    mouseenter(data) {
      this.$set(data, "showEdit", true);
      if (data.children?.length !== 0) return;
      this.$set(data, "showDel", true);
    },
    mouseout(data) {
      this.$set(data, "showEdit", false);
      if (data.children?.length !== 0) return;
      this.$set(data, "showDel", false);
    },
    handleNodeClick(data) {
      this.$emit("getDirectoryId", data);
    },
    cancleSelect() {
      // this.$refs.treeComp.setCurrentKey(null)
      // this.$emit('clearDirectoryId')
    }
    // createDirectoryDialog(type) {
    //   this.dialogData.dialogVisible = true
    //   this.dialogData.width = '30%'
    //   this.dialogData.top = 'calc(50vh - 116px)'
    //   this.dialogData.title = type == 'directory' ? '新建目录' : '新建规范集'
    //   this.dialogData.component = 'MarketCreateDirectory'
    //   this.dialogData.transferData = { type }
    //   this.directoryDialogType = type
    //   this.dialogData.buttons = [
    //     {
    //       type: 'primary',
    //       size: 'medium',
    //       label: '确定',
    //       event: 'modifyTreeData',
    //     },
    //     {
    //       size: 'medium',
    //       label: '取消',
    //       event: 'close',
    //     },
    //   ]
    // },
  },
  watch: {
    defaultCheckTreeKeys: {
      handler: function(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.treeComp.setCurrentKey(newVal[0]);
        });
      }
    }
    // $route: {
    //   handler: function(to, from) {
    //     // 只有当前页面为集市规范化-数据规范信息时
    //     const curPage = to.query.index.replace("/", "");
    //     this.showEdit = curPage == "info";
    //   },
    //   immediate: true
    // }
  }
};
</script>

<style lang="less" scoped>
.editable-tree {
  &-body {
    overflow: scroll;

    ::v-deep {
      .el-button {
        color: #d2d2d2;
        border: none;
        margin-left: 20px;
        padding: 0;
        display: none;
      }
    }
  }

  ::v-deep .el-tree-node__content:hover {
    .el-button {
      display: inline-block;
    }
  }

  ::v-deep .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
  }

  ::v-deep .custom-tree-node-label {
    display: flex;
    width: 180px;
  }

  // ::v-deep .custom-tree-node-operate {
  //   width: 40px;
  //   height: 15px;
  // }

  ::v-deep.el-tree-node.is-current > .el-tree-node__content {
    background: #f0f4ff;
    color: #358df6;
    font-weight: bold;
    i {
      color: #358df6;
      font-weight: bold;
    }
  }
  ::v-deep .el-tree-node__content {
    font-size: 14px;
  }
}
</style>

